<template>
    <div class="order-detail">
        <van-nav-bar title="确认提货" left-arrow @click-left="backUp"></van-nav-bar>
        <section class="contact">
            <van-icon name="location"></van-icon>
            <div class="contact-info">
                <div v-if="address" @click="goto('addresslist')">
                    <p>
                        <span class="contact-name">{{address.consignee}}</span>
                        <span class="contact-tel">{{address.telephone}}</span>
                    </p>
                    <p class="contact-address">{{address.address}}</p>
                </div>
                <div v-if="!address" @click="goto('addressadd')">
                    <p>
                        <span class="contact-name">请添加地址</span>
                    </p>
                </div>
            </div>
        </section>
        <div class="cart-goods-item" v-for="item in goodsItem" :key="item.goodsId">
            <div class="pd-info">
                <div class="pd-title">{{item.goodsName}}</div>
                <!-- <div class="pd-sku">
                  <p class="sku-info">规格/描述等</p>
                </div>-->
                <div class="pd-price">
                    <div class="total">
                        <span>当前库存：{{item.inventory}}</span>
                    </div>
                    <div class="num">×{{item.count}}</div>
                </div>
            </div>
        </div>
        <van-submit-bar :loading="loadingStatus" button-text="提货" @submit="pickup"/>
    </div>
</template>
<script>
    import {SubmitBar, Toast, Stepper} from "vant";
    import api from "@/utils/restful";
    import axios from "axios";

    export default {
        name: "orderconfirm",
        components: {
            [SubmitBar.name]: SubmitBar,
            [Toast.name]: Toast,
            [Stepper.name]: Stepper
        },
        data() {
            return {
                goodsItem: {},
                address: {},
                pickUpInfo: "",
                orderInfo: {},
                totalFee: 99,
                num: 1,
                loadingStatus:false,
            };
        },
        mounted() {
            // this.goodsItem = JSON.parse(this.$route.query.goodsItem);
            console.log(this.$route.params.pickupInfo);
            this.pickUpInfo = this.$route.params.pickupInfo;
            this.goodsItem = this.$route.params.goodsInfos;
            this.getAddress();
        },
        methods: {
            getAddress() {
                this.$axios({
                    method: "get",
                    url: api.defaultShipping,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    if (res) {
                        this.address = res.data;
                    }

                });
            },
            goto(name) {
                if (name == "addresslist") {
                    this.$router.push({name: name, query: {type: 1}});
                } else {
                    this.$router.push({name: name});
                }
            },
            backUp() {
                this.$router.go(-1);
            },
            pickup() {
                this.loadingStatus = true;
                this.$axios({
                    method: "POST",
                    url: api.deliveryOrderCreate,
                    params: {
                        token: localStorage.getItem("token"),
                        shippingId: this.address.id,
                        goods: this.pickUpInfo
                    }
                }).then(res => {
                    console.log(res);
                    if (res) {
                        if (res.data.paymentType == 0) {
                            Toast(res.msg);
                            this.$router.push({name: "viporder", params: {state: "0"}});
                        } else {
                            Toast(res.msg);
                            this.orderInfo.orderNo = res.data.orderNo;
                            this.orderInfo.paymentPrice = res.data.postage;
                            this.orderInfo.returnUrl = "viporder";
                            this.$router.push({
                                name: "OnlinePay",
                                params: {orderInfo: this.orderInfo}
                            });
                        }
                    }
                    this.loadingStatus = false;
                });
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .order-detail {
        .flexbox(flex-start, space-between, column, wrap);
        padding-bottom: 50px;
        background-color: #fff;

        .contact {
            margin-bottom: 10px;
            margin-top: 1px;
            position: relative;
            height: 80px;
            padding: 0 15px;
            display: flex;
            align-items: center;
            background-color: #fff;
            z-index: 999 l;

            &::after {
                .underline();
            }

            .van-icon-location {
                color: @secColor;
                .font-dpr(24px);
                margin-right: 15px;
            }

            .contact-info {
                background-color: #fff;
                flex: 1;
                .font-dpr(14px);
                font-weight: 300;
                color: @fontColorP;

                .contact-name {
                    .font-dpr(15px);
                    font-weight: normal;
                    margin-right: 20px;
                    font-weight: 600;
                }

                .contact-address {
                    .font-dpr(12px);
                    .textoverflow();
                }
            }
        }

        .cart-goods-item {
            background-color: #fff;
            // margin-top: 10px;
            // width: 90vw;
            padding: 10px 15px;
            border-bottom: 1px solid #eee;
            justify-content: space-between;
            // padding: 5px;
            // border-bottom: 1px solid @borderColor;
            &:last-child {
                border-bottom: none;
            }

            .order-info {
                border: 1px solid red;
                position: relative;
                margin-top: 10px;
                padding: 17px 25px;
                color: @fontColorH3;
                .font-dpr(14px);
                font-weight: normal;
                background-color: #fff;

                &::after {
                    position: absolute;
                    content: "";
                    display: block;
                    width: 3px;
                    height: 14px;
                    left: 15px;
                    top: 21px;
                    background-color: @priColor;
                }

                p {
                    .font-dpr(12px);
                    color: @fontColorP;
                    font-weight: 300;
                    margin-top: 12px;
                }
            }

            .pd-images {
                border: 1px solid @borderColor;
                // border: 1px solid #f0f;

                margin: 0 15px 0 5px;
                flex: 1;
                // max-width: 100px;
                img {
                    width: 90px;
                    height: 60px;
                }
            }

            .pd-info {
                flex: 1;
                // .flexbox(flex-start, space-between, column, wrap);
                // width: 68% !important;
                // flex: initial;
                // border: 1px solid blue;

                .pd-title {
                    position: relative;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    /* autoprefixer: off */
                    -webkit-box-orient: vertical;
                    /* autoprefixer: on */
                    -webkit-line-clamp: 2;

                    max-width: 100%;
                    .font-dpr(12px);
                    color: @fontColorH3;
                }

                .pd-sku {
                    padding: 5px 0;
                    line-height: 1.5;
                    .font-dpr(11px);
                    color: @tipColor;
                }

                .pd-price {
                    margin-top: 10px;

                    .total {
                        .font-dpr(14px);
                        color: @secColor;
                    }

                    .flexbox(space-between, center, row, nowrap);
                    flex: initial;

                    /deep/ .van-stepper {
                        // z-index: 999;
                        .flexbox(space-between, center, row, nowrap);
                        flex: initial;
                        border-radius: 2px;
                        // border: 1px solid #f0f;
                        max-height: 16px;
                        width: 2rem;

                        .van-stepper__minus,
                        .van-stepper__plus {
                            border: none;
                            max-height: 16px;
                            background-color: @bgColor;
                        }

                        .van-stepper__input {
                            border: 1px solid @borderColor;
                            // border: 1px solid #f00;
                            max-height: 16px;
                            background-color: @bgColor;
                            // border: none;
                            outline: none;
                            text-align: center;
                            padding: 0;
                            min-width: 40%;
                            .font-dpr(11px);
                        }

                        .van-stepper__minus--disabled {
                            background-color: @bgColor;
                        }
                    }
                }

                .num {
                    .font-dpr(12px);
                }
            }

            .van-checkbox {
                // border: 1px solid @fontColorH3;
                position: absolute;
                left: 0;
            }
        }

        .order-fee {
            // border: 1px solid red;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            padding: 0 15px;
            .font-dpr(14px);
            line-height: 46px;
            margin: 2px 0;
        }
    }

    .total-num {
        text-align: right;
        padding: 10px;
        .font-dpr(12px);

        span {
            .font-dpr(16px);
            font-weight: 500;
        }
    }
</style>